<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>督导员签到记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px">
          <div>
            <div class="clearfix">
                <Input placeholder="管理员姓名"
                       class="mr-10"
                       v-model="queryData.username"
                       style="width: 250px"
                       :clearable="true" />
              <Col span="5"
                   class="mr-10">
                <sele @ProvinceData="childByValue"></sele>
              </Col>
              <DatePicker v-model="queryData.startTime"
                          :clearable=true
                          :editable=false
                          format="yyyy/MM/dd"
                          type="date"
                          placement="bottom-end"
                          placeholder="开始时间"
                          style="width: 200px"></DatePicker>
              &nbsp;-&nbsp;
              <DatePicker v-model="queryData.endTime"
                          :clearable=true
                          :editable=false
                          format="yyyy/MM/dd"
                          type="date"
                          placement="bottom-end"
                          placeholder="结束时间"
                          style="width: 200px"></DatePicker>
              <Button type="primary"
                      custom-icon="iconfont icon-chaxun"
                      size="small"
                      style="margin-left:20px"
                      @click="inQuire">查询</Button>
            </div>
          </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="mb-2">

          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import adminSignApi from '@/api/zhcg/adminSign.js'
import { Message } from 'iview'
import global from '@/assets/js/global'
import sele from '@/view/test/city.vue'
export default {
  name: 'user',
  components: { sele },
  data () {
    return {

      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          {
            title: '用户名',
            key: 'username',
            align: 'center',
            minWidth: 80
          },
          {
            title: '签到地址',
            key: 'signaddress',
            align: 'center',
            minWidth: 250
          },
          {
            title: '签到时间',
            key: 'signtime',
            align: 'center',
            minWidth: 200
          },
          {
            align: 'center',
            title: '签到类型',
            key: 'review',
            minWidth: 100,

            render: (create, params) => {
              let s = params.row.signcode
              let text
              if (s == 'signIn') {
                text = '签到'
              } else if (s == 'signOut') {
                text = '签退'
              } else {
                text = '未知'
              }
              return create('div', {
                style: {
                  borderRadius: '20px'
                }
              }, text)
            }

          },
          {
            align: 'center',
            title: '状态',
            key: 'review',
            minWidth: 100,

            render: (create, params) => {
              let s = params.row.signstatus
              let color, text
              if (s == 0) {
                color = '#5ed71a'
                text = '正常'
              } else if (s == 1) {
                color = '#d72c23'
                text = '迟到'
              } else {
                color = '#4547ff'
                text = '未知'
              }
              return create('div', {
                style: {
                  color: color,
                  borderRadius: '20px'
                }
              }, text)
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        username: '',
        startTime: global.time(new Date()),
        endTime: global.time(new Date())
      }
    }
  },
  async mounted () {
    await setTimeout({}, 1000)
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getTableData()
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      this.queryData.startTime = global.time(this.queryData.startTime)
      this.queryData.endTime = global.time(this.queryData.endTime)
      that.queryData.totalRecord = undefined
      adminSignApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 六级联动数据获取
    childByValue (data) {
      let area = this.queryData
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.strtid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    }
  }
}
</script>
